<template>
  <div class="container">
    <div class="form-data">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px">
        <el-form-item label="v-model.number" prop="number">
          <el-input v-model.number="ruleForm.number" placeholder="只能输入数字"></el-input>
        </el-form-item>

        <el-form-item label="数字+小数点" prop="numberMore">
          <el-input v-model="ruleForm.numberMore" placeholder="只能输入数字"></el-input>
        </el-form-item>

        <el-form-item label="多层验证" prop="dataGroup.name">
          <el-input v-model="ruleForm.dataGroup.name" placeholder="多层验证样子"></el-input>
        </el-form-item>

        <el-form-item label="特殊字符pattern验证" prop="pattern">
          <el-input v-model="ruleForm.pattern" placeholder="特殊字符pattern验证"></el-input>
        </el-form-item>

        <el-form-item label="行内验证" prop="inline" :rules="[{required:true,message:'请输入内容',trigger:'blur'}]">
          <el-input v-model="ruleForm.inline" placeholder="行内验证"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let numberFn = (rule, value, callback, source, options) => {
      // console.log(rule)
      // console.log(value)
      // console.log(callback)
      let reg = /^\d+(\.\d{0,2})?$/g;
      if (value < 0 || value > 99999.99) {
        callback(new Error("0.00到99999.99区间"));
      } else if (!reg.test(value)) {
        callback(new Error("只能输入数字且最多两位小数点"));
      } else {
        callback(); //这个必须要不然过不了验证
      }
    };

    return {
      ruleForm: {
        number: "",
        numberMore: "",
        dataGroup: {
          name: ""
        },
        pattern: "",
        inline:""
      },
      rules: {
        number: [
          { required: true, message: "数字不能为空", trigger: "blur" },
          { type: "number", message: "必须为数字值", trigger: "blur" }
          // { validator: numberFn , trigger: "blur" }
        ],
        numberMore: [
          { required: true, message: "数字不能为空", trigger: "blur" },
          { validator: numberFn, trigger: "blur" }
          // {
          //   pattern: /^\d+(\.\d{0,2})?$/g,
          //   message: "只能输入数字且最多两位小数点",
          //   trigger: "blur"
          // }
        ],
        "dataGroup.name": [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        pattern: [
          { required: true, message: "不要输入特殊字符", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "姓名不支持特殊字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang="scss">
.form-data {
  width: 500px;
}
</style>
